<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-10 17:12:43
 * @Description  : 授权table
-->

<template>
  <div class="auth-table">
    <div class="auth-header">
      <div class="target pl-1">选择对象</div>
      <div class="p-target pl-1">上级部门</div>
      <div class="size-max pl-1" v-if="sizeMaxColumn">
        <div class="set-size flex">
          <!-- <div class="w-[30%]"></div> -->
          <n-input-number
            :value="+convertBytes(defaultSizeMax, 'GB')"
            @update:value="handleDefaultSizeMaxChange"
            :min="0"
            :max="2048"
            clearable
            placeholder="请输入空间大小"
          >
            <template #suffix> GB </template>
          </n-input-number>
        </div>
        <div class="text mr-2">空间大小</div>
      </div>
      <div class="auth-role pl-1">
        <div class="set-auth flex">
          <!-- <div class="w-[30%]">批量设置权限</div> -->
          <RoleSelect
            :role-type="1"
            :multiple="false"
            :class-name="[
              'h-[30px]',
              'flex-1',
              'ml-4',
              'font-normal',
              'w-full',
              'min-w-[150px]'
            ]"
            :default-role-id="defaultRoleId"
            @change-value="handleDefaultRoleChange"
            :to="false"
            placement="top"
          ></RoleSelect>
        </div>
        <div class="text mr-2" v-show="!shows.role">文档权限</div>
      </div>
    </div>

    <div
      class="empty h-[30px] flex justify-center items-center text-[13px]"
      v-if="!targetList.length"
    >
      暂无数据
    </div>
    <div class="auth-item" v-for="item in targetList" :key="item.id" v-else>
      <div class="target flex items-center pl-1">
        <NAvatar
          v-if="+item.targetType === 1"
          round
          :size="16"
          color="rgba(0, 0, 0, 0)"
          :src="item.avator ? BASE_URL + item.avator : defaultUserPng"
          class="mr-1"
        ></NAvatar>
        <SvgIcon icon="bumenwenjianjia" class="mr-1" v-else></SvgIcon>
        <n-ellipsis style="max-width: 100px">
          {{ item.targetName }}
        </n-ellipsis>
      </div>
      <div class="p-target pl-1">
        <n-ellipsis style="max-width: 100px">{{ item.pTargetName }}</n-ellipsis>
      </div>
      <div class="size-max pl-1" v-if="sizeMaxColumn">
        <n-input-number
          :value="+convertBytes(item.sizeMax, 'GB')"
          @update:value="(value: any) => handleByteChange(value, item)"
          :min="0"
          :max="2048"
          clearable
          placeholder="请输入空间大小"
        >
          <template #suffix> GB </template>
        </n-input-number>
      </div>
      <div class="auth-role pl-1">
        <RoleSelect
          :role-type="1"
          :multiple="false"
          :class-name="['h-[30px]', 'w-[80%]', 'ml-4', 'min-w-[110px]']"
          :default-role-id="item.authRole"
          @change-value="(value) => handleAuthChange(value, item)"
        ></RoleSelect>
        <!-- 这里用到了字体图标，主要是hover的时候颜色需要发送改变 -->
        <i
          class="iconfont icon-cuowuguanbiquxiao-yuankuang cursor-pointer close-icon"
          @click="handleRemoveTarget(item)"
        ></i>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { convertBytes } from '@/utils/index'
import { handleNumberChange } from '@/utils/commonBusiness'
import { BASE_URL } from '@/constants'
import defaultUserPng from '@/assets/images/userDefault.png'
import type { IndexObj } from '@/types/commom'

const props = withDefaults(
  defineProps<{
    targetList: IndexObj[]
    sizeMaxColumn?: boolean
  }>(),
  {
    sizeMaxColumn: true
  }
)

const shows = reactive({
  role: false,
  sizeMax: false
})

// 默认的角色
const defaultRoleId = ref('4')

// 默认的空间大小
const defaultSizeMax = ref('0')

const handleByteChange = (value: any, item: any) => {
  const res = handleNumberChange(value)
  if (!res) {
    return
  }
  item.sizeMax = res
  emits('changeTargetList', props.targetList)
}

const emits = defineEmits<{
  (e: 'changeTargetList', value: IndexObj[]): void
  (e: 'changeDefaultRoleId', value: string): void
  (e: 'changeDefaultSizeMax', value: string): void
}>()

// 单个部门-权限发生改变
const handleAuthChange = (value: string | string[], item: IndexObj) => {
  item.authRole = value
  emits('changeTargetList', props.targetList)
}

// 单个部门-权限移除
const handleRemoveTarget = (item: IndexObj) => {
  let newTargetList = props.targetList.filter((item2) => item2.id !== item.id)
  emits('changeTargetList', newTargetList)
}

// 批量权限设置按钮被点击，造成已存在的权限全部发送改变
const handleDefaultRoleChange = (value: string | string[]) => {
  props.targetList.map((item2) => {
    item2.authRole = value
    return item2
  })
  emits('changeDefaultRoleId', value as string)
}

// 批量空间大小设置按钮被点击
const handleDefaultSizeMaxChange = (value: any) => {
  const res = handleNumberChange(value)
  if (!res) {
    return
  }
  defaultSizeMax.value = res
  props.targetList.map((item2) => {
    item2.sizeMax = defaultSizeMax.value
    return item2
  })
  emits('changeDefaultSizeMax', defaultSizeMax.value as string)
}
</script>

<style scoped lang="scss">
.auth-table {
  border: 1px solid #e6e6e6;
  // min-width: 800px;

  .auth-header {
    font-size: 13px;
    font-weight: 800;
    color: #888;
    display: flex;
    border: 1px solid #e6e6e6;
    align-items: center;
    background: #fff url('@/assets/images/bg.gif') 0 -5px repeat-x;

    .text {
      display: block;
    }
    .set-auth,
    .set-size {
      // display: flex;
      height: 30px;
      display: none;
      // *:hover {
      //   display: block;
      // }
    }

    .auth-role {
      justify-content: flex-end;

      &:hover {
        .set-auth {
          display: flex;
        }

        .text {
          display: none;
        }
      }
    }

    .size-max {
      justify-content: flex-end;

      &:hover {
        .set-size {
          display: flex;
        }

        .text {
          display: none;
        }
      }
    }
  }

  .auth-item {
    font-size: 13px;
    color: #444;
    display: flex;
    border: 1px solid #e6e6e6;
    align-items: center;
    background-color: #f8f8f8;
    position: relative;
    &:hover {
      background: #e6f7ff;
      border-color: #91d5ff;

      .close-icon {
        display: block;
      }
    }

    .close-icon {
      position: absolute;
      display: none;
      color: #ccc;
      &:hover {
        color: #ff4d4f;
      }
    }
  }

  .target {
    min-width: 100px;
    flex: 2;
    height: 30px;
    line-height: 30px;
  }

  .p-target {
    min-width: 100px;
    flex: 2;
    border-left: 1px solid #eee;
    height: 30px;
    line-height: 30px;
  }

  .auth-role,
  .size-max {
    min-width: 100px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    flex: 3;
    border-left: 1px solid #eee;
    height: 30px;
    line-height: 30px;
  }
}
</style>
